<template>
<div>
    <div class="auth-container">
       <div class="renzheng">
            <el-icon @click="back" size="30" class="icon"><ArrowLeftBold /></el-icon>
            <span style="margin-left:100px;font-size:30px"><b>实名认证</b></span>
       </div>
        <p>请尽快完成实名认证</p>
        <van-form @submit.prevent="onSubmit">
            <van-field
            v-model="usercodeid"
            label="证件号码"
            placeholder="请输入证件号码"
            required
            />
            <van-field
            v-model="username"
            label="真实姓名"
            placeholder="请输入真实姓名"
            required
            />
            <div class="uploadk"  v-if="picurl">
                <img :src="picurl" class="avatar"/></img>
            </div>
            <div  class="title" v-else >身份证照片识别</div>
            <div class="upload" @change="handleFileUpload">
                <van-uploader
                :after-read="onRead"
                >
                </van-uploader>
            </div>
            </van-form>
    </div>
</div>
</template>

<script setup>
import { ref,onMounted } from "vue"
import http from "../http"
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";

const router = useRouter();

const back = () =>{
    router.back();
}


const form = ref({
idCardNumber: '',
realName: '',
agreedToPolicy: false
});

const onSubmit = async () => {}

const qntoken=ref('')

const picurl=ref('')

const gettoken=()=>{
    http.get("/qiniu/").then(res=>{
        qntoken.value=res.data.token
    })
}

let username =ref('')

let usercodeid=ref('')

const onRead = async (file) => {

const formData = new FormData();
formData.append('file', file.file);
console.log('file', file.file)
formData.append('token',qntoken.value)


http.post('http://up-z2.qiniu.com',formData).then(res=>{
    console.log(res.data)
    picurl.value="http://ssdjkm52e.hn-bkt.clouddn.com/"+res.data.key
    http.post('baidu/?picurl='+picurl.value).then(res=>{
        if(res.data.code==200){
            ElMessage.success('认证成功')
        }else{
            ElMessage.error('认证失败')
        }
        console.log(res.data.data,11111111111111)
        username.value=res.data.data.name
        usercodeid.value=res.data.data.codeid
    })
})
};

onMounted(()=>{
    gettoken()
})

</script>

<style scoped>
.btn{
    background-color:rgb(37, 166, 144);
}

.title{
    text-align: center;
    font-size: 20px;
    margin-top: 80px;
    margin-bottom: 30px;
}

.avatar{
    width: 300px;
    height: 200px;
}

.uploadk{
    margin: 0 auto;
    text-align: center;
    margin-top: 50px;
    margin-bottom: 10px;
}

.upload{
    margin: 0 auto;
    margin-left: 150px;
}

.checkbox{
    margin-top: 120px;
    margin-bottom: 10px;
}

.auth-container {
    max-width: 400px;
    margin: 0px auto;
    /* padding: 20px; */
    /*border: 1px solid #ebedf2;
    border-radius: 8px;
    background-color: #fff;*/
}

.renzheng{
    margin-top: 20px;
    margin-left: 20px;
}


.auth-container h2 {
    text-align: center;
}

.auth-container p {
    margin: 10px 0;
    font-size: 14px;
    color: #888;
    display: flex;
    flex-direction: column;
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
}

</style>